<template>
	<div style="margin: 0 auto;">
		<div style="margin-top:0px;margin-bottom: 5px;">
			<el-input v-model="urlInput" :style="isMobile?'width:100%':'width:401px'" placeholder="链接地址"
				@keyup.native.enter="changeUrl">
			</el-input>
		</div>
		<div class="demo-model" v-if="!isMobile">
			<div class="model-content">
				<iframe :src="url" frameborder="0" style="height: 100%;width: 100%;border-radius: 0px;"
					scrolling="auto">
				</iframe>
			</div>
		</div>
		<iframe v-else :src="url" frameborder="0" style="height: 100%;width: 100%;border-radius: 0px;"
			:style="{height:height+'px'}" scrolling="auto">
		</iframe>
	</div>
</template>

<script>
	import common from "@/common/common.js";
	import Cookies from 'js-cookie';

	export default {
		name: "mobile",
		components: {},
		mixins: [common.baseVM],
		computed: {
			isMobile() {
				return this.clientWidth < 540;
			}
		},
		data() {
			return {
				url: "about:blank",
				urlInput: "about:blank",
				clientWidth: 540,
				height: 622,

				goToUrl: "zxc.scmrrj.com",
				cookieName: "h5customerwebapitoken"
			}
		},
		watch: {
			url(n, o) {
				this.urlInput = this.url;
			}
		},
		methods: {
			init() {
				var toast = this.showToast("加载中...");
				this.clientWidth = document.body.clientWidth;
				var minus = 45;
				this.height = document.body.clientHeight - minus;
				if (this.urlInput == null || this.urlInput == "") {
					this.urlInput = this.url;
				}
				window.onresize = () => {
					this.clientWidth = document.body.clientWidth;
					this.height = document.body.clientHeight - minus;
				};
				this.post("api/Customer/GetMobileCookie").then(data => {
					var token = data.Result;
					var goToUrl = (window.location.href.indexOf("https://") != -1 ? "https://" : "http://") +
						(window.location.href.indexOf('localhost') != -1 ? "localhost:8080" : this.goToUrl);

					//写入token
					if (goToUrl.indexOf("localhost") != -1) {
						Cookies.set(this.cookieName, token, {
							path: '/'
						});
					} else {
						var domain = goToUrl.replace('http://', '').replace('https://', '')
							.replace('zx.', '').replace('zxc.', '').replace(/\//g, '');
						Cookies.set(this.cookieName, token, {
							path: '/',
							domain: domain
						});
					}
					setTimeout(() => {
						this.url = goToUrl;
						//this.showToast("加载成功", "success");
						toast.close();
					}, 1000);
				});
			},

			changeUrl() {
				var val = this.urlInput;
				if (val == null || val == "") {
					return;
				}
				var notHasHttp = val.indexOf('http://') == -1 && val.indexOf('https://') == -1;
				var url = (notHasHttp ? "http://" : "") + val;
				this.$nextTick(() => {
					setTimeout(() => {
						this.url = url;
					}, 50);
				});
			}
		}
	}
</script>

<style>
	.demo-model {
		font-size: 16px;
		background-color: #fff;
		/* width: 401px;
		height: 811px; */
		width: 336px;
		height: 600px;
		position: fixed;
		z-index: 10;
		margin: 0;
		box-sizing: border-box;
		overflow-y: auto;
		background-image: url(/static/img/iPhone13.png);
		background-repeat: no-repeat;
		background-size: 100%;
		border-radius: 30px;
		padding: 48px 13px 25px;
	}

	/* @media screen and (min-width: 540px) {
        .demo-model {
            width: 310px;
            height: 627px;
        }
    } */
	/* width: 401px;
    height: 811px; */

	.model-content {
		box-sizing: border-box;
		height: 100%;
		/* border-bottom-left-radius: 30px; */
	}
</style>
